<template>
  <CDrawer
    v-model:visible="drawerVisible"
    :title="flowName"
    size="small"
    tips="星标为当前流在BOM树所处的位置"
  >
    <CTree
      v-loading="loading"
      highlight-current
      node-key="nodeNo"
      :data="treeData"
      :props="defaultProps"
      :default-expanded-keys="[expandedKey]"
      :current-node-key="[expandedKey]"
    >
      <template #rightIcon="{ data }">
        <CIcon v-if="data.nodeNo == expandedKey" type="c-mian-dizhi" class="icon"></CIcon>
      </template>
    </CTree>
  </CDrawer>
</template>
<script lang="ts" setup>
import { computed, defineProps, defineEmits, watch, ref } from 'vue';
import { CDrawer } from '@/components/CDrawer/index';
import { CTree } from '@/components/CTree/index';
import { getNodePath } from '@/apis/pcf/myModel/modelDetail';
import type { INodeTree } from '@/apis/pcf/myModel/model/modelDetailModel';

interface IDrawerProps {
  visible: boolean;
  flowName: string;
  expandedKey: string;
}

const defaultProps = {
  children: 'children',
  label: 'nodeName',
  id: 'nodeNo'
};
const props = defineProps<IDrawerProps>();
const emits = defineEmits(['update:visible']);
const treeData = ref<INodeTree[]>([]);
const loading = ref(false);
const drawerVisible = computed({
  get: () => {
    return props.visible;
  },
  set: (value: boolean) => {
    emits('update:visible', value);
  }
});
const loadList = async () => {
  loading.value = true;
  try {
    let data = await getNodePath(props.expandedKey);
    treeData.value = data;
  } finally {
    loading.value = false;
  }
};
watch(
  () => drawerVisible.value,
  val => {
    if (val) {
      loadList();
    }
  }
);
</script>
<style lang="scss" scoped>
.icon {
  color: $themeColor;
}
</style>
